<template>
    <div class="pager">
        <div class="box">
            <p class="invite_test">邀请您加入</p>
            <div class="owner">
                <div class="avator">
                    <image :src="detail.headImg" mode="" />
                </div>
                <div class="name">{{ detail.userName }}</div>
            </div>
            <div class="title"> <span>团队名称：</span> {{detail.teamName}}</div>
            <div class="sub_des"> <span>团队简介：</span> {{ detail.teamDes}}</div>
        </div>
        <template v-if="userInfo.teamId">
            <div v-if="userInfo.teamId == id" class="error">您已加入该团队</div>
            <div v-else class="error">您已加入其他团队</div>
        </template>
        <div v-else @click="join" class="btn">申请加入</div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { getTeamInfo, editJoinTeam } from '@/request/team'
export default {
    data() {
        return {
            detail: {},
            id: ''
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    onLoad({ id }) {
        this.id = id
        this.getTeamInfo()
    },
    methods: {
        getTeamInfo() {
            getTeamInfo({
                teamId: this.id
            }).then(res => {
                this.detail = res.data
            })
        },
        async join() {
            await this.$toLogin()
            this.$interact.modal({
                title: '提示',
                content: '确定加入该团队吗？',
                showCancel: true,
            }).then(action => {
                if(action.confirm) {
                    editJoinTeam({
                        teamId: this.id,
                        opType: '01'
                    }).then(res => {
                        this.$interact.toast('申请成功')
                    })
                }
            })
        }

    }
}
</script>
<style lang="less" scoped>
.pager{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 200rpx 0;
    .gradient(#72c9ff, #fff, to bottom);
}
.box{
    width: 660rpx;
    border-radius: 10rpx;
    background: #fff;
    padding: 20rpx;
    box-shadow: 0 0 10rpx #ddd;
}
.title{
    font-size: 42rpx;
    font-weight: bold;
    color: #333333;
    margin: 0 auto 20rpx;
    span{
        font-size: 30rpx;
        color: @mainColor;
        font-weight: normal;
    }
}
.sub_des{
    span{
        font-size: 30rpx;
        color: @mainColor;
        font-weight: normal;
    }
    font-size: 30rpx;
    color: #333;
    line-height: 50rpx;
    margin-bottom: 20rpx;
}
.owner{
    width: 100%;
    height: 100rpx;
    border-radius: 10rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50rpx;    
    .avator{
        width: 70rpx;
        height: 70rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
        image{
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
        }
    }
    .name{
        padding: 0 30rpx;
        font-size: 34rpx;
        font-weight: bold;
        
    }
}
.invite_test{
    color: #ccc;
}
.btn{
    margin-top: 150rpx;
    width: 240rpx;
    height: 240rpx;
    background: @mainColor;
    margin-top: 100rpx;
    border-radius: 120rpx;
    font-weight: bold;
    font-size: 34rpx;
    .align(center);
    color: #fff;
}
.error{
    width: 100%;
    text-align: center;
    margin-top: 50rpx;
    color: #999;
}

</style>
